<template>
<vp-dialog ref="editDialogRef" :span="2">
    <template #title><vp-label zh="选择不正常事件报告" en="Choose Abnormal Report"/></template>
    <vp-card class="mb5">
        <el-form ref="searchFormRef" :model="searchForm" @submit.prevent
            @keyup.enter="handleSearch" label-width="120px">
            <vp-search-row :show-more="showMore">
                <vp-search-col :span="3">
                    <el-form-item prop="fjzchList">
                        <template #label><vp-label zh="机号" en="A/C REG"/></template>
                        <AircraftMultSelect 
                            :selected="searchForm.fjzchList" 
                            @aircraftMultSelected="(data: any) => {searchForm.fjzchList = data}"
                            class="w100"
                        />
                    </el-form-item>
                </vp-search-col>
                <vp-search-col :span="3">
                    <el-form-item prop="sjrq">
                        <template #label><vp-label zh="事件日期" en="Incident Date"/></template>
                        <el-date-picker
                            v-model="searchForm.sjrq"
                            type="daterange"
                            start-placeholder="开始日期/Start Date"
                            end-placeholder="结束日期/End Date"
                            value-format="YYYY-MM-DD"
                            unlink-panels
                            range-separator="-"
                            class="w100"
                        />
                    </el-form-item>
                </vp-search-col>
                <vp-search-col btn-col>
                    <vp-btn-search :loading="loading" @click="handleSearch"/>
                    <vp-btn-reset @click="handleSearchReset"/>
                    <vp-btn-more @change="showMore = $event"/>
                </vp-search-col>
            </vp-search-row>
        </el-form>
    </vp-card>
    <vp-card v-loading="loading">
        <vp-table :data="tableData" 
            highlight-current-row 
            @current-change="handleCurrentChange" 
            @sort-change="handleSortChange"
            :height="`calc(100vh - 450px - ${showMore?'47px':'0px'}`"
            ref="singleTable" row-key="id">
            <el-table-column align="center" label="#" type="index" width="55">
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="bh" 
                show-overflow-tooltip
                min-width="110"
            >
                <template #header><vp-label zh="编号" en="No."/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.bh)"/>
                </template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="sjrq" 
                show-overflow-tooltip
                min-width="120"
            >
                <template #header><vp-label zh="事发日期" en="Incident Date"/></template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="fjjx" 
                show-overflow-tooltip 
                min-width="100"
            >
                <template #header><vp-label zh="机型" en="A/C Type"/></template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="fjzch" 
                show-overflow-tooltip 
                min-width="100"
            >
                <template #header><vp-label zh="机号" en="A/C REG"/></template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="sfdmc" 
                show-overflow-tooltip 
                min-width="120"
            >
                <template #header><vp-label zh="事发地点" en="Incident Loc."/></template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="sjjg" 
                show-overflow-tooltip 
                min-width="200"
            >
                <template #header><vp-label zh="事件经过" en="Incident Process"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.sjjg)"/>
                </template>
            </el-table-column>
            <el-table-column 
                sortable="custom" 
                prop="clff" 
                show-overflow-tooltip 
                min-width="200"
            >
                <template #header><vp-label zh="处理方法" en="Handling Method"/></template>
                <template #default="scope">
                    <span v-html="markTextColor(searchForm.keyword, scope.row.clff)"/>
                </template>
            </el-table-column>
        </vp-table>
        <el-pagination background class="mt5"
            layout="prev, pager, next, total" 
            :total="page.total"
            v-model:currentPage="page.pageNum"
            v-model:pageSize="page.pageSize"
            :hide-on-single-page="false"
        >
        </el-pagination>
    </vp-card>
    <template #footer>
        <vp-btn-confirm @click="handleSave" />
    </template>
</vp-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
import request from '/@/utils/request';
import {markTextColor} from '/@/utils/toolsValidate';
// import AircraftMultSelect from '/@/components/vp/aircraft/VpAircraftMultSelect.vue';
export default defineComponent({
    name: "chooseAssociatedList",
    components: {},
    emits:["confirm"],
    setup(props, context) {
        const state = reactive({
            searchForm: {
				keyword: "",
                fjzchList :[] as any,
                sjrq: [],
			},
            page: {
				total: 0, // 总条数
				pageNum: 1, // 当前页
				pageSize: 10, // 分页大小
				sortColumn: "",
				sortOrder: ""
			},
			tableData: [],
            selectedId: "",
            currentRow : null,
            showMore: false,
            loading: false
		});

        const singleTable = ref();
        const editDialogRef = ref();
        const searchFormRef = ref();

        const handleOpen = (param: any)=>{
            state.selectedId = param.selectedId;
            editDialogRef.value.handleOpen();
            state.currentRow = null;
            loadDataList();
        }

        watch(()=>state.page.pageNum, ()=>{
			loadDataList();
		})

        const loadDataList = () => {
			state.loading = true;
			request.get('/abnormal/list/list', {
				params: {
					...state.searchForm,
					...state.page,
				}
			}).then(res => {
                state.tableData = res?.data?.list || [];
				state.page.total = res?.data?.total || 0;
				state.page.pageNum = res?.data?.pageNum || 1;
                const list = state.tableData.filter((obj: any)=>{return obj.id === state.selectedId});
                if (list.length > 0) {
                    singleTable.value.setCurrentRow(list[0]);
                }
            }).finally(()=>{
				state.loading = false
			})
		}

        const handleCurrentChange = (val: any) => { 
            state.currentRow  = val;
        }

        const handleSave = () => {
            if(state.loading){
                return;
            }
            context.emit("confirm", state.currentRow);
            editDialogRef.value.handleClose();
        }

        const handleSearch = ()=>{
            if(state.page.pageNum == 1){
				loadDataList();
			}else{
				state.page.pageNum = 1
			}
		}

        const handleSearchReset = () => {
            searchFormRef.value.resetFields();
        }

        const handleSortChange = (column: any) => {
            state.page.sortColumn = column.prop;
            state.page.sortOrder = column.order == 'descending' ? 'desc' : 'asc'
            loadDataList();
        }

        return {
            ...toRefs(state),
            searchFormRef,
            handleSave,
            editDialogRef,
            handleOpen,
            singleTable,
            handleCurrentChange,
            handleSearch,
            handleSearchReset,
            handleSortChange,
            markTextColor,
        }
    },
})
</script>
